<template>
    <view>
        <van-calendar
            :show="showCalendar"
            :show-confirm="false"
            :first-day-of-week="1"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
            color="rgba(31, 106, 255, 0.06)"
            :type="selectBetween"
            @getMonthAndYear="selectMonth"
            @select="selectWeek"
            :default-date="defaultSelectDay"
            class="calendar"
            :poppable="false"
            :show-mark="false" />
    </view>
</template>

<script>

import STOPMAPS from '@/utils/constant'
export default {
    components: { },
    name: 'WeekSwitch',
    data () {
        return {
            STOPMAPS,
            date: '',
            minDate: new Date().getTime(),
            maxDate: new Date().getTime(),
            defaultSelectDay: this.selectDay,
            selectBetween:'multiple'
        }
    },
    props: {
        maxTime: {
            // 日历可选时间的最大值
            type: String,
            default: ''
        },
        selectDay: {
            // 是否是打开状态
            type: String,
            default: ''
        },
        showCalendar: {
            // 是否是打开状态
            type: Boolean,
            default: true
        },
        changeDateType: {
            // 是否是打开状态
            type: Boolean,
            default: false
        },
        // selectBetween: {
        //     type: String,
        //     default: ''
        // },
        selectDate: {
            type: String,
            default: ''
        }
    },
    created () {
        console.log(this.selectDay)
        this.defaultSelectDay = this.selectDay ? new Date(this.selectDay).getTime() : new Date().getTime()
    },
    onReady () {
        // eslint-disable-next-line no-undef
        console.log(this.selectBetween)
        this.minDate = this.getLastMonth()
        this.maxDate = this.maxTime ? new Date(this.maxTime).getTime() : this.maxDate
        // if (!this.showCalendar) {
        //     if (this.selectBetween === 'single') {
        //         this.$emit('changeDay', this.setParams(new Date()))
        //     } else if (this.selectBetween === 'month') {
        //         const data = { year: new Date().getFullYear(), month: new Date().getMonth() }
        //         this.$emit('changeDay', this.setParams(data))
        //     }
        // }
    },
    methods: {
        formatter (day) {
            // eslint-disable-next-line no-undef
            const stopDays = getApp().globalData.STOPMAPS
            const year = day.date.getFullYear()
            const month = day.date.getMonth() + 1
            const date = day.date.getDate()
            if (stopDays) {
                stopDays.forEach(item => {
                    if ((year + '-' + (month < 10 ? ('0' + month) : month) + '-' + (date < 10 ? ('0' + date) : date)) === item.date) {
                        if (item.status === 0) {
                            day.className = 'spot'
                        } else if (item.status === 1) {
                            day.className = 'deep-spot'
                        }
                    }
                })
            }

            return day
        },
        getLastMonth () {
            let mon = new Date().getMonth() - 6
            let year = new Date().getFullYear()
            if (mon <= 0) {
                year = year - 1
                mon = mon + 12
            }
            let day = new Date(year, mon, 0).getDate()
            if (day > new Date().getDate()) {
                day = new Date().getDate()
            }
            return new Date(year, mon, day).getTime()
        },
        onClose () {
            this.$emit('changeDay')
        },
        formatDate (date) {
            this.$emit('changeDay', this.setParams(date))
            // this.$emit('changeDay')
            date = new Date(date)
            return `${date.getYear() + 1900}/${date.getMonth() + 1}/${date.getDate()}`
        },
        onConfirm (event) {
            console.log(event, '选择日')
            this.date = this.formatDate(event.detail)
        },
        selectWeek (event) {
            if (this.selectBetween === 'multiple') {
                this.formatDate(event.detail)
                console.log(event, '选择周')
            }
        },
        selectMonth (event) {
            if (this.selectBetween === 'month') {
                this.$emit('changeDay', this.setParams(event.detail))
                console.log(event, '选择月份')
            }
        },
        setParams (date) {
            const dateParams = {
                startTime: '',
                endTime: '',
                selectDay: '',
                year: '',
                month: '',
                day: ''

            }
            if (this.selectBetween === 'single') {
                console.log(date)
                dateParams.day = date.getDate()
                dateParams.year = date.getFullYear()
                dateParams.month = date.getMonth() + 1
                dateParams.selectDay = date.getFullYear() + '-' + this.changeDate(date.getMonth() + 1) + '-' + this.changeDate(date.getDate())
            }
            if (this.selectBetween === 'multiple') {
                dateParams.startTime = date[0].getFullYear() + '-' + this.changeDate(date[0].getMonth() + 1) + '-' + this.changeDate(date[0].getDate())
                dateParams.endTime = date[6].getFullYear() + '-' + this.changeDate(date[6].getMonth() + 1) + '-' + this.changeDate(date[6].getDate())
            }
            if (this.selectBetween === 'month') {
                const startTime = new Date(date.year, date.month, 1)
                dateParams.startTime = startTime.getFullYear() + '-' + this.changeDate(startTime.getMonth() + 1) + '-' + this.changeDate(startTime.getDate())
                const endTime = new Date(date.year, (date.month + 1), 0)
                dateParams.endTime = endTime.getFullYear() + '-' + this.changeDate(endTime.getMonth() + 1) + '-' + this.changeDate(endTime.getDate())
                dateParams.month = startTime.getMonth() + 1
                dateParams.year = startTime.getFullYear()
            }
            return dateParams
        },
        changeDate (number) {
            if (number < 10) {
                number = '0' + number
            }
            return number
        }
    }
}
</script>

<style scoped>
/* .calendar {
  --calendar-height: 200px;
} */
::v-deep .van-calendar__month-title{
    color: #1F6AFF;
}
::v-deep .van-calendar__day{
    padding: 4px 5.25px;
    font-size: 14px;
    width: 40px;
    height: 40px;
}

::v-deep .van-calendar__selected-day{
    color: #1F6AFF;
    background: #E8F4FF;
    border-radius: 16px;
    width: 40px !important;
    height: 40px !important;
}
::v-deep .van-calendar__day--disabled {
    color: #818999;
}
::v-deep .van-calendar__weekday{
    width: 40px !important;
}
::v-deep .van-calendar__body{
    width: calc(57vh - -1px);
}
</style>
